<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chartContainer = ref(null)
let chart = null

// 模拟数据
const performanceData = {
  evolutionSteps: ['1', '2', '3', '4', '5', '6', '7', '8'],
  performance: [78, 82, 85, 89, 86, 92, 90, 89],
  forgetting: [12, 10, 8, 9, 11, 7, 5, 4]
}

// 初始化图表
const initChart = () => {
  chart = echarts.init(chartContainer.value)
  const option = {
    grid: {
      left: '10%',
      right: '10%',
      top: '15%',
      bottom: '15%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['模型性能', '遗忘程度'],
      textStyle: {
        color: '#a8c1c3'
      },
      top: 0
    },
    xAxis: {
      type: 'category',
      data: performanceData.evolutionSteps,
      axisLabel: {
        color: '#a8c1c3'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(62, 172, 180, 0.3)'
        }
      },
      name: '进化序号',
      nameTextStyle: {
        color: '#a8c1c3'
      }
    },
    yAxis: [{
      type: 'value',
      name: '性能 (%)',
      nameTextStyle: {
        color: '#a8c1c3'
      },
      axisLabel: {
        color: '#a8c1c3'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(62, 172, 180, 0.1)'
        }
      }
    }, {
      type: 'value',
      name: '遗忘程度 (%)',
      nameTextStyle: {
        color: '#a8c1c3'
      },
      axisLabel: {
        color: '#a8c1c3'
      },
      splitLine: {
        show: false
      }
    }],
    series: [{
      name: '模型性能',
      type: 'line',
      smooth: true,
      data: performanceData.performance,
      itemStyle: {
        color: '#3eacb4'
      },
      lineStyle: {
        width: 3
      },
      symbol: 'circle',
      symbolSize: 8
    }, {
      name: '遗忘程度',
      type: 'bar',
      yAxisIndex: 1,
      data: performanceData.forgetting,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(242, 151, 1, 0.8)'
        }, {
          offset: 1,
          color: 'rgba(242, 151, 1, 0.2)'
        }])
      }
    }]
  }
  chart.setOption(option)
}

// 模拟样本判断结果数据
const sampleResults = ref([
  {
    id: 1,
    type: '正常样本',
    confidence: 95.8,
    result: '正确',
    timestamp: '12:30:45'
  },
  {
    id: 2,
    type: '异常样本',
    confidence: 88.3,
    result: '正确',
    timestamp: '12:31:02'
  },
  {
    id: 3,
    type: '边界样本',
    confidence: 76.5,
    result: '错误',
    timestamp: '12:31:15'
  }
])

onMounted(() => {
  initChart()
  window.addEventListener('resize', () => {
    chart?.resize()
  })
})
</script>

<template>
  <div class="model-analysis">
    <div class="chart-section">
      <div ref="chartContainer" class="chart"></div>
    </div>
    <div class="results-section">
      <div class="results-header">
        <span>样本判断结果</span>
      </div>
      <div class="results-list">
        <div v-for="result in sampleResults" 
             :key="result.id" 
             class="result-item"
             :class="{ 'error': result.result === '错误' }">
          <div class="result-time">{{ result.timestamp }}</div>
          <div class="result-type">{{ result.type }}</div>
          <div class="result-confidence">
            置信度: <span>{{ result.confidence }}%</span>
          </div>
          <div class="result-status" :class="result.result.toLowerCase()">
            {{ result.result }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.model-analysis {
  height: calc(100% - 2rem);
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
}

.chart-section {
  flex: 1;
  height: 100%;
  
  .chart {
    width: 100%;
    height: 100%;
  }
}

.results-section {
  width: 40%;
  height: 100%;
  
  .results-header {
    color: #3eacb4;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
  }
  
  .results-list {
    height: calc(100% - 1.5rem);
    overflow-y: auto;
    
    &::-webkit-scrollbar {
      width: 4px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(62, 172, 180, 0.1);
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(62, 172, 180, 0.3);
      
      &:hover {
        background: rgba(62, 172, 180, 0.5);
      }
    }
  }
  
  .result-item {
    background: rgba(62, 172, 180, 0.05);
    border-left: 2px solid rgba(62, 172, 180, 0.3);
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.6rem;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
    
    &.error {
      background: rgba(242, 151, 1, 0.05);
      border-left-color: rgba(242, 151, 1, 0.3);
    }
    
    .result-time {
      color: #65959b;
      font-family: var(--font-family-mono);
    }
    
    .result-type {
      color: #a8c1c3;
    }
    
    .result-confidence {
      color: #65959b;
      span {
        color: #3eacb4;
        font-family: var(--font-family-mono);
      }
    }
    
    .result-status {
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 0.55rem;
      
      &.正确 {
        background: rgba(62, 172, 180, 0.1);
        color: #3eacb4;
      }
      
      &.错误 {
        background: rgba(242, 151, 1, 0.1);
        color: #f29701;
      }
    }
  }
}
</style> 